<template>
  <van-form class="form-class" ref="facialFormRef" @submit="onSubmit">
    <van-field
      class="field-name"
      v-model="userInfo.realName"
      center
      clearable
      label="真实姓名"
      placeholder="请输入您的真实姓名"
      :rules="FormRules.requiredFields"
    />
    <van-field
      class="field-name"
      v-model="userInfo.certificateNumber"
      center
      clearable
      label="身份证号"
      placeholder="请输入您的身份证号码"
      :rules="FormRules.identity"
    />
  </van-form>
  <div class="facial-end">
    <van-button class="mobile-end-btn" block type="primary" @click="send"
      >下一步</van-button
    >
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { useStore } from '@/store'
import { useRoute, useRouter } from 'vue-router'
import { FormInstance, Dialog } from 'vant'
import { setItem, getItem } from '@/utils/storage'
import { FormRules } from '@/hooks/form-config'
import {
  postFaceSwiping,
  postFaceResult,
  postChangeAlertState
} from '@/api/face-swiping'
export default defineComponent({
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const facialFormRef = ref<FormInstance>()
    const userInfo = reactive({
      realName: '',
      certificateNumber: ''
    })
    const send = () => {
      facialFormRef.value!.submit()
    }
    // 提交
    const onSubmit = async () => {
      const returnUrl = `${window.location.href}&thirdparty=tenxun`
      const params = {
        realName: userInfo.realName,
        certificateNumber: userInfo.certificateNumber,
        isPhone: true,
        returnUrl: returnUrl
      }
      const res = await postFaceSwiping(params)
      if (res.code !== '0') return
      setItem('bizNo', res.data.bizNo)
      window.location.href = res.data.h5FaceUrl
    }
    // 回调
    const resultQuery = async () => {
      const bizNo = getItem('bizNo')
      const params = {
        orderNo: bizNo
      }
      const res = await postFaceResult(params)
      if (res.code !== '0') {
        return Dialog.alert({
          title: '实名认证失败',
          message: '请重新进行实名认证。'
        }).then(() => {
          // on close
        })
      }
      const paramsA = {
        userId: store.state.login.userInfo.userId,
        status: 1
      }
      const resA = await postChangeAlertState(paramsA)
      if (resA.code !== '0') return
      router.push({
        path: '/real-face-success',
        query: {
          contractId: route.query.contractId
        }
      })
    }
    if (route.query.thirdparty) {
      resultQuery()
    }

    return { userInfo, FormRules, facialFormRef, onSubmit, send }
  }
})
</script>

<style scoped lang="less">
.form-class {
  padding-top: 10px;
  .field-name {
    height: 54px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 15px;
    color: #101010;
  }
}
.facial-end {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  background-color: #fff;
}
</style>
